<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<style>
::-webkit-scrollbar {
	display: none;
}

html, body {
	height: 100%;
	background:#fff;
}

#mountNode {
	display: inline-block;
}

#pie {
	display: inline-block;
}

#zhu {
	display: inline-block;
}
</style>
</head>
<body>
	<div class="bjui-pageContent">
		<div id="mountNode"></div>
		<div id="pie"></div>
		<div id="zhu"></div>
	</div>
	<script src="${ctx}/static/js/jquery.min.js"></script> 
<script src="${ctx}/static/js/g2.min.js"></script>
<script src="${ctx}/static/js/data-set.min.js"></script> 
<script type="text/javascript">
var { DataView } = DataSet;
const colors = G2.Global.colors;
var data = [
            { year: '1991', value: 3 },
            { year: '1992', value: 4 },
            { year: '1993', value: 3.5 },
            { year: '1994', value: 5 },
            { year: '1991', value: 3 },
            { year: '1992', value: 4 },
            { year: '1993', value: 3.5 },
            { year: '1994', value: 5 },
            { year: '1995', value: 4.9 },
            { year: '1996', value: 6 },
            { year: '1997', value: 7 },
            { year: '1999', value: 13 }
];
var dv = new DataView();
//创建折线图表
var chart = new G2.Chart({
    container: 'mountNode',
    width : 400, // 指定图表宽度
    height : 400 // 指定图表高度
  });
/*    折线图初始化 */
chart.scale('count', {
    min: 0
  });
  chart.scale('month', {
    range: [0,1]
  });
  chart.tooltip({
    crosshairs: {
      type: 'line'
    }
  });
  chart.line().position('month*count');
  chart.point().position('month*count').size(4).shape('circle').style({
    stroke: '#fff',
    lineWidth: 1
  });

//创建饼图
var chartpie = new G2.Chart({
    container: 'pie',
    width : 500, // 指定图表宽度
    height : 400 // 指定图表高度
  });

//创建柱形图
var chartzhu = new G2.Chart({
    container: 'zhu',
    width : 400, // 指定图表宽度
    height : 400 // 指定图表高度
  });
/* 柱形图初始化 */
chartzhu.source(data);
   // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
   chartzhu.interval().position('month*count').color('month')
   // Step 4: 渲染图表

 $.ajax({
    type: "GET",
    url: "${ctx}/system/ubiao/list",
    success: function(msg){
           var total=0;
           var j=0;
             for(var i=0;i<msg.length;i++){
            	data[i].year=msg[i].month+"月";
            	data[i].value=msg[i].count; 
            	msg[i].month=msg[i].month+"月";
              	if(msg[i].count!=0){
              		j++;
              		 total=total+msg[i].count;
              	}
            } 
             console.log("不为0的月数："+j);
             console.log("总数："+total);
             var yavg=(total/12).toFixed(2);
             var mavg=(total/j).toFixed(2);
             console.log("月平均为："+mavg);
             console.log("年平均为:"+yavg); 
             chart.changeData(msg);
             chartzhu.changeData(msg);
             chart.guide().text({ 
            	    position: ['50%', '10%'], 
            	    content: "月平均为："+mavg, 
            	    style: {
            	    	fill: '#333',
            	      textAlign: 'center',
            	      fontWeight: 'bold',
            	      fontSize: 14
            	    }
            	  });
             chart.guide().text({ 
         	    position: ['50%', '5%'], 
         	    content: "年平均为:"+yavg, 
         	    style: {
         	    	fill: '#333',
         	      textAlign: 'center',
         	      fontWeight: 'bold',
         	      fontSize: 14
         	    }
         	  });
             chart.guide().text({ 
          	    position: ['50%', '0%'], 
          	    content: "总数为:"+total, 
          	    style: {
          	    	fill: '#333',
          	      textAlign: 'center',
          	      fontWeight: 'bold',
          	      fontSize: 14
          	    }
          	  });
             chart.render();
             chartzhu.guide().text({ 
         	    position: ['50%', '10%'], 
         	    content: "月平均为："+mavg, 
         	    style: {
         	    	fill: '#333',
         	      textAlign: 'center',
         	      fontWeight: 'bold',
         	      fontSize: 14
         	    }
         	  });
             chartzhu.render();
            /*    饼图初始化 */
            dv.source(data).transform({
          	     type: 'percent',
          	     field: 'value',
          	     dimension: 'year',
          	     as: 'percent'
          	   });
          	 chartpie.source(dv, {
          	 	  percent: {
          	 	    formatter: val => {
          	 	      val = (val * 100).toFixed(2) + '%';
          	 	      return val;
          	 	    }
          	 	  }
          	 	});
          	 
          	 chartpie.coord('theta', {
          	 	  radius: 0.75
          	 	});
          	 chartpie.tooltip({
          	 	  showTitle: false,
          	 	  itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
          	 	});
          	 chartpie.intervalStack()
          	 	  .position('percent')
          	 	  .color('year')
          	 	  .label('percent', {
          	 	    formatter: (val, year) => {
          	 	      return year.point.year + ': ' + val;
          	 	    }
          	 	  })
          	 	  .tooltip('year*percent', (year, percent) => {
          	 	    percent = (percent * 100).toFixed(2) + '%';
          	 	    return {
          	 	      name: year,
          	 	      value: percent
          	 	    };
          	 	  })
          	 	  .style({
          	 	    lineWidth: 1,
          	 	    stroke: '#fff'
          	 	  });
          	chartpie.guide().text({ 
           	    position: ['90%', '50%'], 
           	    content: "月平均为："+mavg, 
           	    style: {
           	    	fill: '#333',
           	      textAlign: 'center',
           	      fontWeight: 'bold',
           	      fontSize: 14
           	    }
           	  });
          	 chartpie.render();
            	 
       }
 

 }); 
</script>
</body>
</html>
